import React from "react";
import style from './page.less';
import {useSelector,useDispatch,Link} from 'umi';
import { useState, useEffect} from "react";
import { Input,Button,Select,Table, Switch, Space} from 'antd';
import {PlusOutlined , ReloadOutlined} from '@ant-design/icons';
const { Option } = Select;

const columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '路径',
      dataIndex: 'path',
    },
    {
      title: '顺序',
      dataIndex: 'order',
    },
    {
        title: '阅读量',
        dataIndex: 'views',
      },
      {
        title: '状态',
        dataIndex: 'status',
      },
      {
        title: '发布时间',
        dataIndex: 'publishAt',
      },
      {
        title: '操作',
        render: (row:any) => {
            return <div className={style.pageLook}>
                <span >编辑</span> <span>下线</span>
                <span>查看访问</span> <span>删除</span>
            </div>
        }
      },
  ];


const Page:React.FC = () => {

    let pageIndexModu = useSelector(state=>state.page)
    let dispatch = useDispatch();

  const [pageNameInp,setpageNameInp] = useState('');
  const [pagePathInp,setpagePathInp] = useState('');
  const [pageSelect,setpageSelect] = useState('请选择状态');
  const [pageFlag,setpageFlag] = useState(false)
  const [newArr,setnewArr] = useState<string[]>([])
  const [pages,setPages] = useState(1)
useEffect(()=>{
  dispatch({
      type:"page/pageList",
      payload:{
        page:pages
      }
  })
},[])



 const rowSelection = {
    onChange: (id:string)=>{
        console.log(id)
        if(id.length>0){
            setpageFlag(true)
        }else{
            setpageFlag(false)
        }
      }
  };

//点击获取输入的值
  function pageFunType(){
   dispatch({
    type:"page/pageList",
    payload:{
      page:pages,
      name:pageNameInp,
      path:pagePathInp,
      status:pageSelect
    }
 })
  }
  function onChange(value:string) {
      setpageSelect(value)
  }

 return <div className={style.pageMan}>
       <div className={style.pageTop}>
       <div className={style.pageTopOne}>
            <div className={style.pageInps}><span>名称:</span><Input placeholder="请输入文件名称" value={pageNameInp} className={style.inpts} onChange={(e)=>{

                  setpageNameInp(e.target.value)
            }}/></div>
            <div className={style.pageInps}><span>路径:</span><Input  placeholder="请输入文件路径" value={pagePathInp} className={style.inpts} onChange={(e)=>{
                setpagePathInp(e.target.value)
            }}/></div>

            <div className={style.pageSele}><span>状态:</span>
 
         <Select
            showSearch
            style={{ width: 160 }}
            placeholder={pageSelect}
            optionFilterProp="children"
            onChange={onChange}
            className={style.pageSelects}
      >
        <Option value="publish">已发布</Option>
        <Option value="draft">草稿</Option>
      </Select>

            </div>
            </div>
            <div  className={style.pageTopTwo}>
              <div>
             <Button type="primary" className={style.bnts} onClick={()=>{
                  pageFunType()
             }}>
                 搜索
             </Button>
             <Button className={style.bnts} onClick={()=>{
                 setpageNameInp('');
                 setpagePathInp('');
                 setpageSelect('请选择状态')
             }}>重置</Button>
              </div>
            </div>
       </div>

       <div className={style.pageAdd}>
        {pageFlag?<div className={style.pageAddLeft}>
          <Button>发布</Button>
          <Button>下线</Button>
          <Button danger>删除</Button>
         </div>:null}

         <div className={style.pageAddRight}>
         <Button type="primary" icon={<PlusOutlined />}>
           新建
        </Button>
        <ReloadOutlined className={style.pageReloadOutlined}/>
         </div>
       </div>

       <div className={style.pageTable}>
        {  pageIndexModu.pageList && <Table rowKey="id" dataSource={pageIndexModu.pageList.data[0]} columns={columns} 
          rowSelection={rowSelection as any}
        />}
       </div>

       </div>
}

export default Page;